<!--created by yuyupeng-->
<!--2023/03/24-->
<!-- 参数管理-->
<template>
  <div class="list-card-container">
    <a-card title="参数管理" class="general-card">
      <!-- 查询表单 -->
      <AdvancedSearch
        ref="searchRef"
        :data-source="searchItemList"
        @change="searchByParams"
      />
      <a-space style="margin-top: 5px; margin-bottom: 5px">
        <AdvancedDrawer
          ref="addDrawerRef"
          click="button"
          title="新增参数信息"
          clickword="新增参数"
          :rules="advancedDrawerRules"
          :data-source="addDrawerConfig"
          @open="initAddDrawer"
          @select="selectChange"
          @change="addDrawerSubmit"
        >
          <!-- 插槽-参数名称 -->
          <template #paramNameSlot>
            <template v-if="currentParamType === '部门'">
              <a-tree-select
                v-model="currentParamName"
                placeholder="请选择部门"
                :data="deptTreeData"
                :field-names="{
                  key: 'code',
                  title: 'name',
                }"
                :filter-tree-node="
                  (searchValue, node) =>
                    filterSelectTreeNode(searchValue, node, 'name')
                "
                :allow-search="true"
                :allow-clear="false"
                @change="(value) => onChangeSelectDept(value, 'Add')"
              />
            </template>
            <template v-else-if="currentParamType === '人员'">
              <a-button @click="openOrgEmployeeSelectModal"
                ><icon-user />选择用户</a-button
              >
            </template>
            <template v-else-if="currentParamType === 'IP'">
              <a-input
                v-model="currentParamName"
                placeholder="请输入参数名称"
              />
            </template>
            <template v-else-if="currentParamType === '路由'">
              <a-input
                v-model="currentParamName"
                placeholder="请输入路由"
                @input="(value) => onChangeRouter(value, 'Add')"
              />
            </template>
            <template v-else>
              <a-input
                v-model="currentParamName"
                placeholder="请输入参数名称"
              />
            </template>
          </template>
        </AdvancedDrawer>
        <!--        <a-popconfirm
          content="确定删除吗?"
          type="warning"
          @ok="deleteTbDataList(selectedKeys)"
        >
          <a-button :disabled="selectedKeys.length === 0"
            ><icon-delete />批量删除</a-button
          >
        </a-popconfirm>-->
      </a-space>
      <!-- 表格 -->
      <a-table
        v-model:selectedKeys="selectedKeys"
        row-key="id"
        column-resizable
        :columns="tbCols"
        :data="tbData"
        :row-selection="rowSelection"
        :pagination="pagination"
        :loading="tbLoading"
        :scroll="{ x: '100%', y: 600 }"
        :scrollbar="true"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <!-- 插槽-参数详情 -->
        <!--        <template #detail="{ record }">
          <a-link type="text" @click="showDetailDrawer(record)"> 详情 </a-link>
        </template>-->
        <!-- 插槽-一键复制 -->
        <template #quickCopyToolTip="{ record, column }">
          <quick-copy-tool-tip
            :show-text="record[column['dataIndex']]"
            show-btn
          />
        </template>
        <!-- 插槽-参数名称 -->
        <template #paramName="{ record }">
          <span
            v-if="record && dataList.length > 0 && record.paramType === '部门'"
            >{{ getParamName(record.paramName) }}</span
          >
          <span v-else>{{ record.paramName }}</span>
        </template>
        <!-- 插槽-操作 -->
        <template #operation="{ record }">
          <a-space>
            <a-link type="text" @click="showEditDrawer(record)"> 修改 </a-link>
            <!--            <a-popconfirm
              content="确定删除吗?"
              type="warning"
              @ok="deleteTbData(record.id)"
            >
              <a-link type="text">删除</a-link>
            </a-popconfirm>-->
          </a-space>
        </template>
      </a-table>
    </a-card>
    <!-- 参数详情 -->
    <AdvancedDrawer
      ref="showDrawerRef"
      click="link"
      title="参数详情"
      clickword=""
      :data-source="dictDataDrawerConfig"
      :data-record="currentRecord"
    />
    <!-- 修改抽屉 -->
    <AdvancedDrawer
      ref="editDrawerRef"
      click="link"
      title="修改参数信息"
      clickword=""
      :rules="advancedDrawerRules"
      :data-source="editDrawerConfig"
      :data-record="currentRecord"
      @open="initEditDrawer"
      @select="selectChange"
      @change="editDrawerSubmit"
    >
      <!-- 插槽-参数名称 -->
      <template #paramNameSlot>
        <template v-if="currentParamType === '部门'">
          <a-tree-select
            v-model="currentParamName"
            placeholder="请选择部门"
            :data="deptTreeData"
            :field-names="{
              key: 'code',
              title: 'name',
            }"
            :filter-tree-node="
              (searchValue, node) =>
                filterSelectTreeNode(searchValue, node, 'name')
            "
            :allow-search="true"
            :allow-clear="false"
            @change="(value) => onChangeSelectDept(value, 'Edit')"
          />
        </template>
        <template v-else-if="currentParamType === '人员'">
          <a-button @click="openOrgEmployeeSelectModal"
            ><icon-user />选择用户</a-button
          >
        </template>
        <template v-else-if="currentParamType === 'IP'">
          <a-input v-model="currentParamName" placeholder="请输入参数名称" />
        </template>
        <template v-else-if="currentParamType === '路由'">
          <a-input
            v-model="currentParamName"
            placeholder="请输入路由"
            @input="(value) => onChangeRouter(value, 'Edit')"
          />
        </template>
        <template v-else>
          <a-input v-model="currentParamName" placeholder="请输入参数名称" />
        </template>
      </template>
    </AdvancedDrawer>
    <!-- 选人组件 -->
    <EmployeeSelectModal
      ref="employeeSelectModalRef"
      :only-chosen-one-employee="true"
      @submit="submitEmployeeSelectModal"
    />
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import { Notification } from '@arco-design/web-vue';
  import { ParamRecord, ParamParams } from '@/api/system/model/paramModel';
  import {
    queryParamRecordList,
    addParamRecord,
    editParamRecord,
    // deleteParamRecords,
  } from '@/api/system/param';
  import { ref, onMounted, reactive, computed } from 'vue';
  import AdvancedSearch from '@/common/components/cac-components/advanced-search/index.vue';
  import AdvancedDrawer from '@/common/components/cac-components/advanced-drawer/index.vue';
  import EmployeeSelectModal from '@/common/components/cac-components/employee-select-modal/index.vue';
  import QuickCopyToolTip from '@/common/components/cac-components/quickcopy-tooltip/index.vue';
  import { Pagination } from '@/types/global';
  import { queryDeptRecordTreeList } from '@/api/system/dept';

  /**
   * data
   */
  // 表格
  const tbData = ref<ParamRecord[]>([]);
  const tbCols = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      fixed: 'left',
      width: 60,
      render: (row: any) => row.rowIndex + 1,
    },
    /* { title: '', dataIndex: 'id', fixed: 'left', ellipsis: true, align: 'center', tooltip: true },
    { title: '查看', fixed: 'left', align: 'center', width: 100, slotName: 'detail' }, */
    {
      title: '参数类型',
      dataIndex: 'paramType',
      width: 150,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    {
      title: '描述',
      dataIndex: 'remark',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
    },
    {
      title: '参数编码',
      dataIndex: 'paramCode',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    {
      title: '参数名称',
      dataIndex: 'paramName',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'paramName',
    },
    {
      title: '参数值',
      dataIndex: 'paramValue',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    {
      title: '责任人',
      dataIndex: 'maintainer',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    /* { title: '所属部门ID(非必须)', dataIndex: 'deptId', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '所属组织机构ID(非必须)', dataIndex: 'orgId', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '创建者', dataIndex: 'creator', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '创建时间', dataIndex: 'createTime', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '更新者', dataIndex: 'updater', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '更新时间', dataIndex: 'updateTime', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '更新ip', dataIndex: 'updateIp', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '是否删除(非必须)', dataIndex: 'deleted', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '数据密级(1:公开,2普通商密,3核心商密,4内部,5秘密,6机密,7绝密)', dataIndex: 'secretLevel', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' },
    { title: '乐观锁', dataIndex: 'version', width: 150, ellipsis: true, align: 'center', tooltip: true, slotName: 'quickCopyToolTip' }, */
    {
      title: '操作',
      align: 'center',
      fixed: 'right',
      width: 120,
      slotName: 'operation',
    },
  ];
  const searchRef = ref<any>();
  const addDrawerRef = ref<any>();
  const editDrawerRef = ref<any>();
  const showDrawerRef = ref<any>();
  const currentRecord = ref<ParamRecord>(); // 记录当前选择的表格行
  const tbLoading = ref<boolean>(false);
  const currentParamType = ref<string>(); // 当前选择的参数类型
  const currentParamName = ref<string>(); // 当前选择的参数名称
  const currentParamValueEditable = ref<boolean>(true); // 当前状态下参数值是否可编辑
  const currentParamValuePlaceholder = ref<string>('请输入参数值'); // 当前状态下参数值的提示信息placeholder
  const deptTreeData = ref<any[]>([]); // 树
  const dataList = ref<any[]>([]); // treeData的所有key:title:id
  const employeeSelectModalRef = ref<any>(); // 人员对话框的ref
  // 勾选框
  const selectedKeys = ref([]);
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  // 分页，默认第1页，每页10条
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    showPageSize: true,
    showTotal: true,
  };
  const pagination = reactive({
    ...basePagination,
  });
  // 搜索项配置
  const searchItemList = [
    /* { type: 'text', labelText: '', fieldName: 'id'}, */
    {
      type: 'select',
      labelText: '参数类型',
      fieldName: 'paramType',
      codefield: 'value',
      namefield: 'label',
      options: [
        { label: '部门', value: '部门' },
        { label: '人员', value: '人员' },
        { label: 'IP', value: 'IP' },
        { label: '路由', value: '路由' },
      ],
    },
    /* { type: 'text', labelText: '描述', fieldName: 'remark'}, */
    { type: 'text', labelText: '参数编码', fieldName: 'paramCode' },
    { type: 'text', labelText: '参数名称', fieldName: 'paramName' },
    { type: 'text', labelText: '参数值', fieldName: 'paramValue' },
    { type: 'text', labelText: '责任人', fieldName: 'maintainer' },
    /* { type: 'text', labelText: '所属部门ID(非必须)', fieldName: 'deptId'},
    { type: 'text', labelText: '所属组织机构ID(非必须)', fieldName: 'orgId'},
    { type: 'text', labelText: '创建者', fieldName: 'creator'},
    { type: 'text', labelText: '创建时间', fieldName: 'createTime'},
    { type: 'text', labelText: '更新者', fieldName: 'updater'},
    { type: 'text', labelText: '更新时间', fieldName: 'updateTime'},
    { type: 'text', labelText: '更新ip', fieldName: 'updateIp'},
    { type: 'text', labelText: '是否删除(非必须)', fieldName: 'deleted'},
    { type: 'text', labelText: '数据密级(1:公开,2普通商密,3核心商密,4内部,5秘密,6机密,7绝密)', fieldName: 'secretLevel'},
    { type: 'text', labelText: '乐观锁', fieldName: 'version'}, */
  ];
  // computed
  // 新增抽屉配置项
  const addDrawerConfig = computed(() => {
    return [
      /* { type: 'text', labelText: '', fieldName: 'id'}, */
      {
        col: 24,
        type: 'select',
        labelText: '参数类型',
        fieldName: 'paramType',
        codefield: 'value',
        namefield: 'label',
        options: [
          { label: '部门', value: '部门' },
          { label: '人员', value: '人员' },
          { label: 'IP', value: 'IP' },
          { label: '路由', value: '路由' },
        ],
      },
      {
        col: 24,
        type: 'text',
        labelText: '参数编码',
        fieldName: 'paramCode',
        placeholder: '请确保参数编码唯一',
      },
      {
        col: 24,
        type: 'other',
        labelText: '参数名称',
        fieldName: 'paramNameSlot',
      },
      {
        col: 24,
        type: 'text',
        labelText: '参数值',
        fieldName: 'paramValue',
        placeholder: currentParamValuePlaceholder.value,
        disabled: !currentParamValueEditable.value,
      },
      { col: 24, type: 'text', labelText: '责任人', fieldName: 'maintainer' },
      {
        col: 24,
        type: 'text',
        labelText: '描述',
        fieldName: 'remark',
        textrow: 2,
      },
      /* { type: 'text', labelText: '所属部门ID(非必须)', fieldName: 'deptId'},
      { type: 'text', labelText: '所属组织机构ID(非必须)', fieldName: 'orgId'},
      { type: 'text', labelText: '创建者', fieldName: 'creator'},
      { type: 'text', labelText: '创建时间', fieldName: 'createTime'},
      { type: 'text', labelText: '更新者', fieldName: 'updater'},
      { type: 'text', labelText: '更新时间', fieldName: 'updateTime'},
      { type: 'text', labelText: '更新ip', fieldName: 'updateIp'},
      { type: 'text', labelText: '是否删除(非必须)', fieldName: 'deleted'},
      { type: 'text', labelText: '数据密级(1:公开,2普通商密,3核心商密,4内部,5秘密,6机密,7绝密)', fieldName: 'secretLevel'},
      { type: 'text', labelText: '乐观锁', fieldName: 'version'}, */
    ];
  });
  // 修改抽屉配置项
  const editDrawerConfig = computed(() => {
    return [
      {
        col: 24,
        type: 'text',
        labelText: 'id',
        fieldName: 'id',
        disabled: true,
      },
      {
        col: 24,
        type: 'select',
        labelText: '参数类型',
        fieldName: 'paramType',
        codefield: 'value',
        namefield: 'label',
        options: [
          { label: '部门', value: '部门' },
          { label: '人员', value: '人员' },
          { label: 'IP', value: 'IP' },
          { label: '路由', value: '路由' },
        ],
        disabled: true,
      },
      {
        col: 24,
        type: 'text',
        labelText: '参数编码',
        fieldName: 'paramCode',
        placeholder: '请确保参数编码唯一',
        disabled: true,
      },
      {
        col: 24,
        type: 'other',
        labelText: '参数名称',
        fieldName: 'paramNameSlot',
      },
      {
        col: 24,
        type: 'text',
        labelText: '参数值',
        fieldName: 'paramValue',
        placeholder: currentParamValuePlaceholder.value,
        disabled: !currentParamValueEditable.value,
      },
      { col: 24, type: 'text', labelText: '责任人', fieldName: 'maintainer' },
      {
        col: 24,
        type: 'text',
        labelText: '描述',
        fieldName: 'remark',
        textrow: 2,
      },
      /* { type: 'text', labelText: '所属部门ID(非必须)', fieldName: 'deptId'},
      { type: 'text', labelText: '所属组织机构ID(非必须)', fieldName: 'orgId'},
      { type: 'text', labelText: '创建者', fieldName: 'creator'},
      { type: 'text', labelText: '创建时间', fieldName: 'createTime'},
      { type: 'text', labelText: '更新者', fieldName: 'updater'},
      { type: 'text', labelText: '更新时间', fieldName: 'updateTime'},
      { type: 'text', labelText: '更新ip', fieldName: 'updateIp'},
      { type: 'text', labelText: '是否删除(非必须)', fieldName: 'deleted'},
      { type: 'text', labelText: '数据密级(1:公开,2普通商密,3核心商密,4内部,5秘密,6机密,7绝密)', fieldName: 'secretLevel'},
      { type: 'text', labelText: '乐观锁', fieldName: 'version'}, */
    ];
  });
  // 抽屉表单项校验配置
  const advancedDrawerRules = ref({
    paramType: [{ required: true, message: '请选择参数类型' }],
    paramCode: [{ required: true, message: '请输入参数编码' }],
    paramName: [{ required: true, message: '请输入参数名称' }],
    paramValue: [{ required: true, message: '请输入参数值' }],
    maintainer: [{ required: true, message: '请输入责任人' }],
  });
  // 参数详情抽屉配置项
  const dictDataDrawerConfig = [
    /* { type: 'text', labelText: '', fieldName: 'id'}, */
    { type: 'text', labelText: '参数类型', fieldName: 'paramType' },
    { type: 'text', labelText: '描述', fieldName: 'remark' },
    { type: 'text', labelText: '参数编码', fieldName: 'paramCode' },
    { type: 'text', labelText: '参数名称', fieldName: 'paramName' },
    { type: 'text', labelText: '参数值', fieldName: 'paramValue' },
    { type: 'text', labelText: '责任人', fieldName: 'maintainer' },
    /* { type: 'text', labelText: '所属部门ID(非必须)', fieldName: 'deptId'},
    { type: 'text', labelText: '所属组织机构ID(非必须)', fieldName: 'orgId'},
    { type: 'text', labelText: '创建者', fieldName: 'creator'},
    { type: 'text', labelText: '创建时间', fieldName: 'createTime'},
    { type: 'text', labelText: '更新者', fieldName: 'updater'},
    { type: 'text', labelText: '更新时间', fieldName: 'updateTime'},
    { type: 'text', labelText: '更新ip', fieldName: 'updateIp'},
    { type: 'text', labelText: '是否删除(非必须)', fieldName: 'deleted'},
    { type: 'text', labelText: '数据密级(1:公开,2普通商密,3核心商密,4内部,5秘密,6机密,7绝密)', fieldName: 'secretLevel'},
    { type: 'text', labelText: '乐观锁', fieldName: 'version'}, */
  ];
  /**
   * func
   */
  /**
   * @method
   * @description 获取表格数据
   */
  const getTbDataByPage = async (reqdata: any = {}) => {
    const params: ParamParams = {
      page: pagination.current,
      limit: pagination.pageSize,
      ...reqdata,
    };
    tbLoading.value = true;
    selectedKeys.value = [];
    try {
      const { data } = await queryParamRecordList(params);
      tbData.value = data.list;
      pagination.total = Number(data.total); // 用Number函数转一下，否则f12控制台会有警告，很不好看
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      tbLoading.value = false;
    }
  };
  /**
   * @method
   * @description 按条件搜索
   */
  const searchByParams = (reqdata: any = {}) => {
    getTbDataByPage(reqdata);
  };
  /**
   * @method
   * @description 页码发生变化触发
   */
  const onPageChange = (current: number) => {
    pagination.current = current;
    searchRef.value.handleSubmit(); // 与搜索结果保持一致
  };
  /**
   * @method
   * @description 数据条数发生变化触发
   */
  const onPageSizeChange = (pageSize: number) => {
    console.log(pageSize);
    pagination.pageSize = pageSize;
    searchRef.value.handleSubmit(); // 与搜索结果保持一致
  };
  /**
   * @method
   * @description 专门针对参数类型为部门的数据设置的函数，他的paramName实际上是部门编码，需要渲染成中文名称
   * @param paramName
   */
  const getParamName = (paramName: string) => {
    return dataList.value.filter((e) => e.key === paramName)[0].title;
  };
  /**
   * @method
   * @description 抽屉下拉选择框变化触发
   * @param value
   * @param name
   */
  const selectChange = (value: any, name: string) => {
    if (name === 'paramType') {
      // 每次参数类型下拉框变化时，重置参数名称和参数值
      currentParamName.value = '';
      addDrawerRef.value.setFormValues({
        paramValue: '',
      });
      currentParamType.value = value;
      if (value === '部门' || value === '人员' || value === '路由') {
        currentParamValueEditable.value = false;
        currentParamValuePlaceholder.value = '参数值由参数名称渲染而来';
      } else if (value === 'IP') {
        currentParamValueEditable.value = true;
        currentParamValuePlaceholder.value = '请输入IP';
      } else {
        currentParamValueEditable.value = true;
        currentParamValuePlaceholder.value = '请输入参数值';
      }
    }
  };
  /**
   * @method
   * @description 新增抽屉初始化
   */
  const initAddDrawer = () => {
    currentParamType.value = undefined;
    currentParamName.value = undefined;
  };
  /**
   * @method
   * @description 编辑抽屉初始化
   */
  const initEditDrawer = () => {
    currentParamType.value = currentRecord.value?.paramType;
    currentParamName.value = currentRecord.value?.paramName;
    if (
      currentRecord.value?.paramType === '部门' ||
      currentRecord.value?.paramType === '人员' ||
      currentRecord.value?.paramType === '路由'
    ) {
      currentParamValueEditable.value = false;
    } else {
      currentParamValueEditable.value = true;
    }
  };
  /**
   * @method
   * @description 新增抽屉提交
   */
  const addDrawerSubmit = async (reqdata: any) => {
    try {
      reqdata.paramName = currentParamName.value;
      const res = (await addParamRecord(reqdata)) as any;
      console.log(res);
      if (res.code === 200) {
        Notification.success({
          content: '保存成功！',
        });
      } else {
        Notification.error({
          title: '保存失败！',
          content: res.message,
        });
      }
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      searchRef.value.handleSubmit(); // 与搜索结果保持一致
    }
  };
  /**
   * @method
   * @description 修改抽屉提交
   */
  const editDrawerSubmit = async (reqdata: any) => {
    reqdata.paramName = currentParamName.value;
    console.log(reqdata);
    try {
      const res = (await editParamRecord(reqdata)) as any;
      console.log(res);
      if (res.code === 200) {
        Notification.success({
          content: '修改成功！',
        });
      } else {
        Notification.error({
          title: '修改失败！',
          content: res.message,
        });
      }
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      searchRef.value.handleSubmit(); // 与搜索结果保持一致
    }
  };
  /**
   * @method
   * @description 删除参数信息
   */
  /* const deleteTbData = async (id: string) => {
    const reqdata = [];
    reqdata.push(id);
    try {
      const res = (await deleteParamRecords(reqdata)) as any;
      console.log(res);
      if (res.code === 200) {
        Notification.success({
          content: '删除成功！',
        });
      } else {
        Notification.error({
          title: '删除失败！',
          content: res.message,
        });
      }
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      searchRef.value.handleSubmit(); // 与搜索结果保持一致
    }
  }; */
  /**
   * @method
   * @description 批量删除参数信息，传id数组，支持批量
   */
  /* const deleteTbDataList = async (ids: string[]) => {
    try {
      const res = (await deleteParamRecords(ids)) as any;
      console.log(res);
      if (res.code === 200) {
        Notification.success({
          content: '删除成功！',
        });
      } else {
        Notification.error({
          title: '删除失败！',
          content: res.message,
        });
      }
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      searchRef.value.handleSubmit(); // 与搜索结果保持一致
    }
  }; */
  /**
   * @description 打开详情抽屉
   * @param record 当前选择的表格行数据
   */
  /* const showDetailDrawer = (record: ParamRecord) => {
    currentRecord.value = record;
    showDrawerRef.value.showDrawer(); // 打开详情抽屉
  }; */
  /**
   * @description 打开修改抽屉
   * @param record 当前选择的表格行数据
   */
  const showEditDrawer = (record: ParamRecord) => {
    currentRecord.value = record;
    editDrawerRef.value.showDrawer(); // 打开修改抽屉
  };
  /**
   * @method
   * @description 部门选择树变化触发
   * @param value
   * @param operationType 操作类型，分为Add和Edit
   */
  const onChangeSelectDept = (value: string, operationType: string) => {
    if (operationType === 'Add') {
      addDrawerRef.value.setFormValues({
        paramValue: dataList.value.filter((e) => e.key === value)[0].key,
      });
    } else if (operationType === 'Edit') {
      editDrawerRef.value.setFormValues({
        paramValue: dataList.value.filter((e) => e.key === value)[0].key,
      });
    }
  };
  /**
   * @method
   * @description 路由输入框变化触发
   * @param value
   * @param operationType 操作类型，分为Add和Edit
   */
  const onChangeRouter = (value: string, operationType: string) => {
    if (operationType === 'Add') {
      addDrawerRef.value.setFormValues({
        paramValue: value,
      });
    } else if (operationType === 'Edit') {
      editDrawerRef.value.setFormValues({
        paramValue: value,
      });
    }
  };
  /**
   * 服务于树选择组件的搜索功能
   * @param searchValue
   * @param nodeData
   */
  const filterSelectTreeNode = (
    searchValue: string,
    nodeData: any,
    namefield: string
  ) => {
    return (
      nodeData[namefield].toLowerCase().indexOf(searchValue.toLowerCase()) > -1
    );
  };
  /**
   * @description 获取部门的树形结构信息
   */
  const getTreeData = async () => {
    deptTreeData.value = [];
    try {
      const { data } = await queryDeptRecordTreeList({});
      deptTreeData.value = data;
      dataList.value = [];
      generateList(deptTreeData.value);
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
        duration: 20000,
      });
    }
  };
  /**
   * @description 构建treeData的所有 { key: title: id } 数组
   * @param data 树节点数据
   */
  const generateList = (data: any) => {
    // 创建dataList 递归调用
    data.forEach((item: any) => {
      const node = item;
      const key = node.code;
      dataList.value.push({ key, title: node.name, id: node.id });
      if (node.children) {
        generateList(node.children);
      }
    });
  };
  /**
   * @description 开启部门人员选择组件modal
   */
  const openOrgEmployeeSelectModal = () => {
    employeeSelectModalRef.value.openOrgEmployeeSelectModal();
  };
  const submitEmployeeSelectModal = (chosenEmployees: any) => {
    console.log(chosenEmployees);
    currentParamName.value = `${chosenEmployees[0].userCode}-${chosenEmployees[0].username}`;
    addDrawerRef.value.setFormValues({
      paramValue: `${chosenEmployees[0].userCode}-${chosenEmployees[0].username}`,
    });
  };
  /**
   * onMounted
   */
  onMounted(() => {
    getTbDataByPage();
    getTreeData();
  });
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    // background-color: var(--color-bg-1);
    border-radius: var(--border-radius-default);
  }
</style>
